<template>

  <div class="components-articleListFilter">
      <ul class="label_ul show_one_line label-container">

          <div class="left_container">
              <li class="label_ul_li" @click="selectLabelAction(key,$event)" v-for="(item,key) in labelList">
                  <span :class="{active: key==activeDateIndex}">{{item.name}}</span>
              </li>
          </div>

          <div class="right_container">
              <li class="label_ul_li"  @click="contentTypeAction(key,$event)" v-for="(item,key) in contentType">
                  <span :class="{active: key==activeTypeIndex}">{{item.name}}</span>
              </li>
          </div>

      </ul>
  </div>

</template>
<script>

  export default {
    data: function () {
      return {
          labelList: {
              "moment": {
                  name: "实时发生",
                  value: "moment"
              },
              "24Hour": {
                  name: "24小时",
                  value: "24Hour"
              },
              "threeDay": {
                  name: "3天",
                  value: "threeDay"
              },
              "sevenDay": {
                  name: "7天",
                  value: "sevenDay"
              },
              "moreTime": {
                  name: "更长",
                  value: "moreTime"
              }
          },

        contentType:{
            "article": {
                name: "文章",
                value: "article"
            },
            "picture": {
                name: "图片",
                value: "picture"
            },
            "video": {
                name: "视频",
                value: "video"
            },
        },
        // 当前选中的索引
          activeDateIndex : 9999999,
          activeTypeIndex : 9999999,
      }
    },
    computed: {
    },
    // 组件初始化完成执行的方法
    mounted: function () {

    },
    methods: {
        // 点击选中的标签
        selectLabelAction: function(key,myevent){
          this.activeDateIndex = key;
          this.$emit("select-label",this.labelList[key]);
      },
        // 点击选中的标签
        contentTypeAction: function(key,myevent){
            this.activeTypeIndex = key;
            this.$emit("select-label",this.labelList[key]);
        },
      // 切换是否显示更多
      toggleMore : function(){
          this.isShowMore = !this.isShowMore;
      }
    }
  }
</script>

<style scoped lang="scss">
  .components-articleListFilter {
      .left_container{
          width: 50%;
          float: left;
      }
      .right_container{
          width: 50%;
          float: left;
      }

    line-height: 35px;

    .label-container{
      list-style: none;
        position: relative;
        background: #fafafa;
        padding: 0 20px;
        margin: 20px 0;

      &.show_one_line{
        height: 35px;
        overflow: hidden;
      }

      .label_ul_li{
        cursor: pointer;
        float: left;
        margin-right: 15px;

        span{
          &:hover{
            /*color:red;*/
          }
          &.active{
              background: #6dcef0;
              padding: 3px 10px;
              border-radius: 2px;
              color: #fff;
          }
        }
      }

    }
  }
</style>
